@charset 'utf-8';
*{
    margin: 0 ;
    padding: 0;
}
a{
    text-decoration: none;
}

li{
    list-style: none;
}
.shopping{
    width: 100%;
    padding-bottom: 15px;
    background-image: url(../img/购物车\ \(4\).png);
    .site-nav{
        width: 100%;
        background-color: #f5f5f5;
        .site-nav-bd{
            width: 1190px;
            height: 35px;
            line-height: 35px;
            font-size: 12px;
            margin: 0 auto;
            a{
                font-size: 7px;
                color: #6c6c6c;
                &:hover{
                    color: red;
                }
            }
            .site-nav-bd-l{
                float: left;
                >li{
                    padding: 0 6px 0 6px;
                    float: left;
                    a{
                        margin-right: 7px; 
                    }
                    div{
                        .first{
                            display: inline-block;
                            color: red;
                            max-width: 98px;
                            overflow: hidden;
                            text-overflow: ellipsis;
    
                        }
                    }
                }
            }
    
            .site-nav-bd-r{
                float: right;
                >li{
                    float: left;
                    padding: 0 6px 0 6px;
                    >a{
                        margin-right: 7px;
                    }
                    >ul{
                        display: none;
                        line-height: 30px;
                        border: 1px solid #EEEEEE;
                        border-top: 1px solid #FFF;
                        padding-left: 6px;
                    }
                }
                >.bg{
                    position: relative;
                    >ul{
                        width: 80px;
                        position: absolute;
                        top: 35px;
                        left: 0px;
                        >li:hover{
                            background-color: #d6d6d6;
                        }
                    }
                }
                >.bg:hover{
                    background-color: #fff;
                    // border: 1px solid #EEEEEE;
                    >ul{
                        display: block;
                    }
                }
            }
        }
    }

    // 头部搜索
    .tb-header-wrapper{
        width: 100%;
        background-color: #fff;
        margin-bottom: 24px;
        .tb-header{
            margin: 0 auto;
            padding: 11px 0;
            height: 58px;
            width: 1190px;
            position: relative;
            // 淘宝网logo
            .logo{
                position: absolute;
                top: 11px;
                left: 0;
            }
            // 右侧搜索
            .search-r{
                float: right;
                margin-top: 8px;
                >ul{
                    width: 104px;
                    height: 42px;
                    border-radius: 21px 0 0 21px;
                    background-color: #f5f5f5;
                    float: left;
                    &:hover {
                        border-radius: 21px 0 0 0;
                        .hd{
                            background-color: #f5f5f5;
                            display: block;
                        }
                    }
                    .hd{
                        display: none;
                        &:hover{
                            background-color: #fff;
                            width: 102px;
                            height: 40px;
                            border: 1px solid #f5f5f5;
                            a{
                                color: red;
                            }
                        }
                    }
                    >li{
                        height: 42px;
                        line-height: 42px;
                        text-align: center;
                        font-size: 12px;
                        a{
                            color: #6b6b6b;
                        }
                        
                    }
                }
                // 输入框
                .input-box{
                    height: 42px;
                    width: 236px;
                    background-color: #ebebeb;float: left;
                    input{
                        width: 236px;
                        height: 38px;
                        line-height: 42px;
                        font-size: 14px;
                        outline: 0;
                        background-color: #ebebeb;
                        border: 1px solid #ebebeb;
                    }
                }
                // 搜索框
                .search-box{
                    width: 83px;
                    height: 42px;
                    background-color: #ebebeb;
                    border-radius: 0 38px 38px 0;
                    float: left;
                    button{
                        background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
                        text-align: center;
                        color: #fff;
                        font-weight: 700;
                        width: 81px;
                        height: 41px;
                        line-height: 41px;
                        border: none;
                        border-radius: 38px;
                        font-size: 18px;

                    }
                }
            }
        }
    }

    // 主体
    .content{
        width: 1190px;
        // height: 100px;
        background-color: #fff;
        margin: 0 auto;
        border-radius: 24px;
        // 头部盒子
        .cart-filter-bar{
            padding: 0 18px;
            height: 73px;
            width: 1190px;
            box-sizing: border-box;
            border-bottom: 1px solid #e6e6e6;
            // 左边购物车文字
            .switch-cart{
                height: 72px;
                line-height: 72px;
                font-size: 18px;
            }
            //购物车总和
            .cart-sum{
                height: 72px;
                line-height: 72px;
                font-size: 14px;
                float: right;
                .price{
                    font-size: 22px;
                    font-weight: 500;
                    color: #FF5000;
                    margin-right: 12px;
                }
                button{
                    background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
                    text-align: center;
                    color: #fff;
                    font-weight: 700;
                    width: 81px;
                    height: 41px;
                    line-height: 41px;
                    border: none;
                    border-radius: 38px;
                    font-size: 18px;

                }
            }
        }
        .cart-main{
            min-height: 210px;
            // box-sizing: content-box;
            // 全选按钮那行
            .cart-table{
                overflow: hidden;
                height: 50px;
                line-height: 50px;
                color: #3c3c3c;
                font-weight: 700;
                
                span{
                    font-size: 13px;
                    vertical-align:middle;
                }
                >.r{
                    float: right;
                    //单价 数量 金钱 操作
                    span{
                        display: inline-block;
                        width: 120px;
                        padding-left: 10px;
                    }
                }
            }
            //店铺名
            .shop-info{
                width: 1175px;
                padding-left: 15px;
                height: 38px;
                // background-color: red;
                font-size: 12px;
                input{
                    width: 15px;
                    height: 15px;
                    margin-top: 11px;
                }
                .tianmao{
                    width: 16px;
                    height: 16px;
                }
                a{
                    color: #6b6b6b;
                    &:hover{
                        color: #FF5000;
                        text-decoration: underline;
                    }
                }
            }
            // 商品盒子主体
            .order-content{
                border: 1px solid #F5F5F5;
                background-color: #F5F5F5;
                border-radius: 18px;
                margin: 0 24px;
                margin-bottom: 15px;
                overflow: hidden;
                &:hover .describe{
                    // border-color: #f60;
                    border-color: #dbeefe;
                    // background-color: #fff;
                }
                .dundle-hd{
                    height: 28px;
                    padding-top: 9px;
                    padding-bottom: 3px;
                    // border-bottom: 1px solid #e8e8e8;
                    font-size: 12px;
                    color: #6c6c6c;
                    .sp1{
                        margin-left: 50px;
                        display: inline-block;
                        text-align: center;
                        height: 22px;
                        line-height: 22px;
                        background: #e7e7e7;
                        margin-right: 15px;
                        color: #6c6c6c;
                        font-size: 12px;
                        padding: 0 8px;
                    }
                }
            }
            .dundle-main{
                vertical-align:top;
                font-size: 12px;
                
                a{
                    font-size: 12px;
                    color: #6c6c6c;
                    &:hover{
                        color: red;
                        text-decoration: underline;
                    }
                }
                input{
                    width: 15px;
                    height: 15px;
                    margin-top: 20px;
                    margin-left: 28px;
                    margin-right: 7px;
                }

                .img-box{
                    display: inline-block;
                    padding-top: 20px;
                    img{
                        width: 80px;
                        height: 80px;
                        
                    }
                }

                // 商品描述
                .describe{
                    width: 210px;
                    height: 84px;
                    padding: 16px 0;
                    display: inline-block;
                    vertical-align:top;
                    border: 1px dashed transparent;
                    &:hover{
                        border-color: #f60;
                        background-color: #fff;
                    }
                    p{
                        margin: 0 5px 0 15px;
                        color: #9c9c9c;
                        line-height: 18px;
                        height: 18px;   
                    }
                }

                //价格
                .dundle-price{
                    width: 130px;
                    padding: 20px 0 0 10px;
                    display: inline-block;
                    vertical-align:top;
                }

                // 数量
                .num{
                    width: 120px;
                    height: 109px;
                    display: inline-block;
                    vertical-align:top;
                    padding-top: 20px;
                }

                // 金额
                .sum{
                    width: 140px;
                    height: 109px;
                    padding-top: 20px;
                    display: inline-block;
                    vertical-align:top;
                    p{
                        font-family: Verdana,Tahoma,arial;
                        color: #f40;
                        font-weight: 700;
                    }
                }
                // 操作
                .td-op{
                    padding: 20px 0 0 1px;
                    display: inline-block;
                    vertical-align:top;
                    a{
                        display: block;
                        color: #3c3c3c;
                        padding-bottom: 3px;
                        &:hover{
                            color: red;
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
}